<template>
    <div class="ve_container">
        <h2>设置</h2>

        <el-card class="mb-12">
            <div style="padding: 12px">
                <h3>主题</h3>
                <p>选择强调色（会同步到手办与按钮）</p>
                <div style="display: flex; gap: 8px; margin-top: 8px">
                    <div
                        v-for="c in colors"
                        :key="c"
                        :style="{
                            width: '36px',
                            height: '36px',
                            background: c,
                            borderRadius: '6px',
                            cursor: 'pointer',
                            boxShadow:
                                siteAccent === c
                                    ? '0 6px 20px rgba(0,0,0,0.12)'
                                    : 'none',
                        }"
                        @click="setAccent(c)"
                    ></div>
                </div>
            </div>
        </el-card>

        <el-card class="mb-12">
            <div style="padding: 12px">
                <h3>手办行为</h3>
                <el-switch
                    v-model="floatingEnabled"
                    active-text="浮动动画"
                    inactive-text="静止"
                    @change="toggleFloat"
                ></el-switch>
                <div style="margin-top: 12px">
                    <el-button size="small" @click="resetFig"
                        >重置手办位置</el-button
                    >
                </div>
            </div>
        </el-card>

        <el-card>
            <div style="padding: 12px">
                <h3>其他</h3>
                <p>可在此处扩展更多用户偏好设置。</p>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();
const colors = ["#7c5cff", "#ff6b6b", "#00b894", "#0984e3", "#fdcb6e"];

const siteAccent = computed(() => store.state.settings.siteAccent);
const floatingEnabled = computed({
    get: () => store.state.settings.figFloat,
    set: (v) => store.dispatch("settings/setFigFloat", v),
});

function setAccent(c) {
    document.documentElement.style.setProperty("--accent", c);
    store.dispatch("settings/setAccent", c);
    // keep compatibility event
    window.dispatchEvent(
        new CustomEvent("settings-changed", { detail: { accent: c } }),
    );
}

function toggleFloat(v) {
    store.dispatch("settings/setFigFloat", v);
    window.dispatchEvent(
        new CustomEvent("settings-changed", { detail: { float: v } }),
    );
}

function resetFig() {
    store.dispatch("settings/setFigPos", null);
    store.dispatch("settings/setFigMin", false);
    window.dispatchEvent(
        new CustomEvent("settings-changed", { detail: { resetFig: true } }),
    );
}

// apply saved accent on mount
const savedAccent = store.state.settings.siteAccent;
if (savedAccent)
    document.documentElement.style.setProperty("--accent", savedAccent);
</script>

<style scoped>
.ve_container {
    padding: 20px;
}
h2 {
    margin-bottom: 16px;
}
.mb-12 {
    margin-bottom: 12px;
}
</style>
